<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			.baba {
				width: 800px;
				height: 600px;
				border: 1px solid red;
				background: yellow;
				position: relative;
				margin: 20px auto;
			}
			
			.son {
				width: 20px;
				height: 20px;
				background: gray;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			
			.box {
				width: 20px;
				height: 20px;
				background: green;
				position: absolute;
				top: 400px;
				left: 400px;
			}
			
			.order {
				width: 20px;
				height: 20px;
				background: red;
				position: absolute;
				top: 580px;
				left: 780px;
			}
		</style>
		<div class="baba">
			<div class="son">

			</div>
			<div class="box">

			</div>
			<div class="order">

			</div>
		</div>
		<script type="text/javascript">
			/*
			 * 1.获取用户按键
			 * 2.根据用户按键控制son的坐标(20为一步)
			 * 3.不能让son出到baba的外面
			 */
			var baba = document.querySelector(".baba");
			var son = document.querySelector(".son");
			var box = document.querySelector(".box");
			var order = document.querySelector(".order");
			var son_x = parseInt(getComputedStyle(son).left);
			var son_y = parseInt(getComputedStyle(son).top);
			var box_x = parseInt(getComputedStyle(box).left);
			var box_y = parseInt(getComputedStyle(box).top);
			var order_x = parseInt(getComputedStyle(order).left);
			var order_y = parseInt(getComputedStyle(order).top);
			var now_operation = 5;
			document.addEventListener("keydown", function(e) {
				if(e.keyCode == 87 || e.keyCode == 38 || e.keyCode == 104) {
					now_operation = 8
				} else if(e.keyCode == 68 || e.keyCode == 39 || e.keyCode == 102) {
					now_operation = 6
				} else if(e.keyCode == 98 || e.keyCode == 40 || e.keyCode == 83) {
					now_operation = 2
				} else if(e.keyCode == 100 || e.keyCode == 37 || e.keyCode == 65) {
					now_operation = 4
				}
			})
		</script>
	</body>

</html>